<template>
	<view class="patrol_style" scroll-y="false">
		<!-- <view class="topSearch">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword" :animation="false" :showAction="false"></u-search>
		</view> -->
		<view class="dropdown_top">
			<zb-dropdown-menu :style="{ width: dropdownMenu }">
				<zb-dropdown-item name="所属项目" :options="projectOption" v-model="projectFication" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
			<zb-dropdown-menu v-if="projectFication != 0" :style="{ width: dropdownMenu }">
				<zb-dropdown-item name="所属计划" :options="planOption" v-model="planFication" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
			<zb-dropdown-menu :style="{ width: dropdownMenu }">
				<zb-dropdown-item name="是否完成" :options="completed" v-model="completedData" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
		</view>

		<scroll-view @scrolltolower="loadMoreData" scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
			<view @click="contentBtnok(item)" class="content_scroll" v-for="(item, index) in isScMyMonitorData" :key="index">
				<view class="content_top">
					<view>
						<image style="width: 50rpx; height: 50rpx" src="../../static/mappages/patrol/dc.png" mode=""></image>
						<text style="margin-left: 20rpx">{{ item.pjId_dictText || '- -' }}</text>
					</view>
					<view>
						<button :disabled="urgingDisabled" v-if="item.izProblem_dictText == '是'" class="urgingStyle" @click.stop="urgingBtnOK(item)">催办</button>
					</view>
				</view>
				<view class="content_center">
					<view class="content_centerFlex">
						<view class="formgroup">所属计划 :</view>
						<view class="groupholder">{{ item.planId }}</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">检查方式 :</view>
						<view class="groupholder">
							{{ item.scCheckWay == '0' ? '未查' : item.scCheckWay == '1' ? '差' : item.scCheckWay == '2' ? '良' : item.scCheckWay == '3' ? '优' : '- -' }}
						</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">是否完成监察 :</view>
						<view class="groupholder">{{ item.scCheckWay == '0' ? '线下' : item.scCheckWay == '1' ? '线上' : '- -' }}</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">是否存在问题 :</view>
						<view class="groupholder">{{ item.izProblem_dictText || '- -' }}</view>
					</view>
				</view>
			</view>
			<u-loading-icon style="margin-top: 50rpx" v-if="noticeInfo.isBoolean"></u-loading-icon>
			<uni-load-more v-if="!noticeInfo.isBoolean" status="暂无更多" />
		</scroll-view>
		<u-loading-page :loading="urgingDisabled" loading-text="请稍后..."></u-loading-page>
		<!-- 巡查时间 -->
		<!-- <u-calendar :show="patrolShow" :mode="patrolMode" @close="patrolShow = false" @confirm="patrolConfirm"></u-calendar> -->
		<!-- <uni-fab horizontal="right" vertical="bottom" ref="fab" @fabClick="fabClick" /> -->
	</view>
</template>

<script>
import { getScMyMonitor, getPjByUser, getPlanByPj, postUrging, getQueryById } from '@/api/mappages/supervise/supervise.js';
export default {
	components: {},
	data() {
		return {
			urgingDisabled: false,
			dropdownMenu: '50%',
			keyword: '',
			albumWidth: 0,
			urls1: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg'],
			patrolMode: 'range',
			planFication: 0, //所属计划
			projectFication: 0, //所属项目
			completedData: 2, //是否完成
			completed: [
				{
					text: '是',
					value: 0
				},
				{
					text: '否',
					value: 1
				},
				{
					text: '是否完成(全部)',
					value: 2
				}
			],
			projectOption: [
				{
					text: '所属项目(全部)',
					value: 0
				}
			], //所属项目
			planOption: [
				{
					text: '所属计划(全部)',
					value: 0
				}
			], //所属计划
			isScMyMonitorData: [],
			noticeInfo: {
				page: 1,
				size: 10,
				isBoolean: true
			}
		};
	},
	watch: {
		projectFication(val) {
			if (this.projectFication != 0) {
				this.dropdownMenu = '33.33%';
				this.planByPj(this.projectFication);
			} else {
				this.dropdownMenu = '50%';
			}
			console.log(this.projectFication, '222');
			console.log(val, '222222222222');
		}
	},
	methods: {
		urgingBtnOK(item) {
			this.urgingDisabled = true;
			let brr = {
				id: item.probId
			};
			postUrging(brr)
				.then((res) => {
					this.$common.successToShow(res.result);
					this.urgingDisabled = false;
				})
				.catch((error) => {
					this.$common.errorToShow('催办失败');
					this.urgingDisabled = false;
				});
		},
		// 触底刷新事件
		loadMoreData() {
			this.noticeInfo.page += 1;
			!this.noticeInfo.isBoolean ? '' : this.isNoticeFow();
			console.log('触底更22新');
		},
		//整改状态
		ficationChange() {
			this.createdFun();
		},
		createdFun() {
			this.isScMyMonitorData = [];
			this.noticeInfo = {
				page: 1,
				size: 10,
				isBoolean: true
			};
			this.isNoticeFow();
		},
		//河道巡查 点击事件
		contentBtnok(item) {
			console.log(item, '河道巡222查');
			this.$tab.navigateTo(`/mappages/supervise/superDetails/superDetails?WoID=${item.id}`);
		},
		isNoticeFow() {
			let brr = {
				planId: this.planFication == 0 ? '' : this.planFication,
				pjId: this.projectFication == 0 ? '' : this.projectFication,
				izProblem: this.completedData == 2 ? '' : this.completedData,
				page: this.noticeInfo.page,
				size: this.noticeInfo.size
			};
			getScMyMonitor(brr).then((res) => {
				if (!res.result) return (this.noticeInfo.isBoolean = false);
				if (this.noticeInfo.page > 1 && res.result.total >= this.noticeInfo.size) {
					const previousData = [...this.isScMyMonitorData];
					this.isScMyMonitorData = [...previousData, ...res.result.records];
				} else {
					this.noticeInfo.isBoolean = true;
					this.isScMyMonitorData = res.result.records;
				}

				if (res.result.total === this.isScMyMonitorData.length) {
					this.noticeInfo.isBoolean = false;
				}
			});
			this.pjByUser();
		},
		//删除数组值 除了第0 项
		removeAllExceptFirst(array) {
			return array.filter((item, index) => index === 0);
		},
		//查询所属项目
		async pjByUser() {
			let arr = await getPjByUser();
			this.projectOption = this.removeAllExceptFirst(this.projectOption);
			if (arr.result.length > 0) {
				arr.result.map((r) => {
					this.projectOption.push({
						text: r.pjName,
						value: r.id
					});
				});
			}
			console.log(this.projectOption, '查询所属项目');
		},
		// //查询所属计划
		async planByPj(val) {
			let arr = await getPlanByPj(val);
			this.planOption = this.removeAllExceptFirst(this.planOption);
			if (arr.result.length > 0) {
				arr.result.map((r) => {
					this.planOption.push({
						text: r.planName,
						value: r.id
					});
				});
			}
			console.log(arr, '查询所属计划');
		}
	},
	onLoad(options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
		this.isNoticeFow();
	},
	onPullDownRefresh() {
		console.log('下拉刷新');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
};
</script>

<style scoped>
.scrollbox {
	height: calc(100vh - 190rpx);
}
.example-body {
	padding: 12px;
	background-color: #ffffff;
}

.result-box {
	text-align: center;
	padding: 20px 0px;
	font-size: 16px;
}

.patrol_style {
	/* padding: 20rpx; */
	width: 100%;
	overflow-y: hidden;
}

.dropdown_top {
	display: flex;
}

.content_scroll {
	margin-top: 5rpx;
	width: 100%;
	background-color: #fff;
	padding: 22rpx;
}

.content_top {
	display: flex;
	justify-content: space-between;
}

.content_top view {
	display: flex;
	align-items: center;
}

.content_center {
	display: flex;
	flex-direction: column;
	color: #000;
}
.content_centerFlex {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #666666;
	height: 50rpx;
}
.formgroup {
}
.groupholder {
	margin-left: 22rpx;
}
.content_button {
	margin: 20rpx 0;
}

.album {
	@include flex;
	align-items: flex-start;

	&__avatar {
		background-color: $u-bg-color;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1;
	}
}

.topSearch {
	/* margin-top: 10rpx; */
	padding: 10rpx;
	background-color: #fff;
}

.urgingStyle {
	background: #2e87ff;
	color: #fff;
	border-radius: 50rpx;
	font-size: 22rpx;
	padding: 2rpx 48rpx;
}
</style>
